<template>
  <div class="station-container">
<!--    <div class="header">-->
<!--      <div>-->
<!--        <span>YHXX-1遥测综控台</span>-->
<!--      </div>-->
<!--    </div>-->
    <el-row :gutter="10">
<!--      <el-col class="column">-->
<!--        <div class="header">-->
<!--          <span>YHXX-1遥测综控台</span>-->
<!--        </div>-->
<!--      </el-col>-->
      <el-col :lg="16" class="column">
        <el-row :gutter="10">
          <el-col :lg="12" class="column">
            <StatusCard title="综合测控装置状态监控" />
          </el-col>
          <el-col :lg="12" class="column">
            <StatusCard title="记录器状态监控" />
          </el-col>
          <el-col :lg="24" class="column">
            <StatusCard title="NT4及等效模件状态监控" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :lg="8" class="column">
        <el-row>
          <el-col class="column">
            <CmdLogCard style="height: 500px" />
          </el-col>
          <el-col class="column">
            <CmdCard />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      title="服务器丢失!"
      v-model="lostConnectDialogVisible"
      width="60%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <span>正在重连中。。。</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Station"
}
</script>

<script setup>
import {ref, onBeforeMount, onBeforeUnmount} from 'vue'
import StatusCard from './components/StatusCard'
import CmdCard from './components/CmdCard'
import CmdLogCard from './components/CmdLogCard'
import webSocket from './utils/webSocket'

let lostConnectDialogVisible = ref(true)
onBeforeMount(() => {
  webSocket.connect()
  webSocket.on({
    'event': 'open',
    'function': function () {
      lostConnectDialogVisible.value = false
    }
  })
  webSocket.on({
    'event': 'close',
    'function': function () {
      lostConnectDialogVisible.value = true
    }
  })
})
onBeforeUnmount(() => {
  webSocket.disconnect()
})
</script>

<style lang="sass">
.station-container
  .el-overlay, .el-overlay-dialog
    position: absolute
</style>

<style scoped lang="sass">
.station-container
  position: relative
  .header
    height: 60px
    margin-bottom: 10px
    display: flex
    justify-content: center
    align-items: center
    //height: 100%
    //background-color: #409EFF
    //box-shadow: 3px 3px 5px #79bbff

    background-color: #559cf5
    box-shadow: 3px 3px 5px #79bbff
    border-radius: 20px

    font-size: 36px
    color: white

  .column
    margin-bottom: 10px

  .cmd-card
    width: 100%
    height: fit-content
    //height: 600px

  .log-row
    height: 333px

    .log-column
      height: 100%
</style>
